<script setup lang="ts">
import {
  getPartnerChannelEquityListServer,
  getPartnerChannelJoiningListServer,
  getPartnerContractLevelServer,
  getPartnerListServer,
  getPartnerScreenListServer,
  getPartnerShipPolicyListServer,
  partnerSub
} from "@/api/partner";
import S1 from '~/assets/images/partner/2.png'
import {getProvinceList} from "@/api/about/job";
import {ElMessage} from "element-plus";
import {getUrlParams} from "@/utils";
import seo from "@/utils/seo";
import {getSeoInfoServer, getWebBanner} from "@/api/common";

onActivated(async () => {
  getProvince()
  let type = getUrlParams('type')
  scrollTo(type)
  formTop.value = document.querySelector('.ht-partner-send-email')!.getBoundingClientRect().top-20
})
const equityData = ref([])
const joinData = ref({})
const partnerData = ref({})
const policyData = ref({})
const strategyData = ref({
  top: [],
  list: []
})
const isLoadPolicy = ref(false)
const formTop = ref(0)
let subForm = reactive({
  address: '',
  businessScope: '',//	业务范围
  clientGroup: '',//客户群体
  company: '',
  contractLevel: '',//	签约级别
  email: '',
  name: '',
  phone: '',
  typeId: 1,//1:加入我们(首页) 2:官网留言(合作伙伴)
})
const address = ref([])
const allowSubmit = ref(true)
const seoInfo = ref({...seo,title:'密软件_数据防泄漏_渠道合作_华途信息'})
const getSeo = async ()=>{
  const {data} =await getSeoInfoServer("/partner")
  seoInfo.value = {...data}
}
getSeo()
const BannerInfo = ref({
  imageOrVideo: '',
  intro: '',
  title: '',
  caseIntroList: '',
})
const getBanner = async () => {
  const {data} = await getWebBanner(6)
  if (data) {
    BannerInfo.value = data
  }
}

// 权益
const getPartnerChannelEquity = async () => {
  const {data} = await getPartnerChannelEquityListServer()
  equityData.value = data
}
const getPartnerJoining = async () => {
  const {data} = await getPartnerChannelJoiningListServer()
  joinData.value = data[0]
}
const getPartnerInfo = async () => {
  const {data} = await getPartnerListServer()
  partnerData.value = data
}
const getPartnerPolicy = async () => {
  const {data} = await getPartnerShipPolicyListServer()
  policyData.value = data
  isLoadPolicy.value = true
}
// 战略合作伙伴
const getPartnerStrategy = async () => {
  const {data} = await getPartnerScreenListServer()
  strategyData.value = data
}
const readyToSubmit = () => {
  document.documentElement.style.scrollBehavior = 'smooth';
  window.scrollTo(0, formTop.value)
}
const subPartner = async () => {
  if (!allowSubmit.value) {
    return
  }
  allowSubmit.value = false
  // 判断
  if (!subForm.name) {
    ElMessage({
      message: "请输入姓名",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!/((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1})|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d{1}))$)/.test(subForm.phone)) {
    ElMessage({
      message: "请检查联系方式",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }

  if (!/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(subForm.email)) {
    ElMessage({
      message: "请检查邮箱",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!subForm.company) {
    ElMessage({
      message: "请输入公司名称",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!subForm.address) {
    ElMessage({
      message: "请选择省份地市",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!subForm.businessScope) {
    ElMessage({
      message: "请输入主营业务范围",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  if (!subForm.clientGroup) {
    ElMessage({
      message: "请输入主要服务的客户群体",
      type: "warning",
      duration: 3000
    });
    allowSubmit.value = true
    return
  }
  let form = Object.assign({}, subForm)

  partnerSub(form)
      .then(res => {
        if (res.code === 200) {
          ElMessage({
            message: "提交成功",
            type: "success",
            duration: 3000
          });
          reset()
        } else {
          allowSubmit.value = true
        }
      })
      .catch((e) => {
        allowSubmit.value = true
      })
      .finally(() => {
        allowSubmit.value = true
      })
}

const reset = () => {
  subForm.address = ''
  subForm.businessScope = ''
  subForm.clientGroup = ''
  subForm.company = ''
  subForm.email = ''
  subForm.name = ''
  subForm.phone = ''
  address.value = []
  subForm.contractLevel = contractLevelList.value[0]['dictValue']
}


const options = ref([])
const contractLevelList = ref([])
const getProvince = async () => {
  const {data} = await getProvinceList(3)
  options.value = data
}
const getContractLevel = async () => {
  const {data} = await getPartnerContractLevelServer()
  contractLevelList.value = data
  subForm.contractLevel = data[0]['dictValue']
}
const contractLevelClickHandle = (info: { [x: string]: string; }) => {
  subForm.contractLevel = info['dictValue']
}

const cascadery = ref()
const addressChangeHandle = () => {
  subForm.address = cascadery.value.getCheckedNodes()[0].pathLabels.join('/')
}
const scrollTo = (type: any) => {
  // 8 9 10
  let zc = document.querySelector('.ht-partner-policy') as HTMLElement
  let qy = document.querySelector('.ht-partner-equity') as HTMLElement
  let jm = document.querySelector('.ht-partner-join') as HTMLElement
  let zcY = zc.getBoundingClientRect().y
  let qyY = qy.getBoundingClientRect().y
  let jmY = jm.getBoundingClientRect().y
  document.documentElement.style.scrollBehavior = 'smooth';
  let y = 0;
  switch (type) {
    case '8':
      y = zcY;
      break
    case '9':
      y = qyY;
      break
    case '10':
      y = jmY;
      break
  }
  window.scrollTo(0, y)
}

getBanner()
getPartnerChannelEquity()
getPartnerJoining()
getPartnerInfo()
getPartnerPolicy()
getPartnerStrategy()
getContractLevel()
</script>
<template>
  <div class="ht-partner">
    <Head>
      <Title>{{ seoInfo.title}}</Title>
      <Meta name="description" :content="seoInfo.description"/>
      <Meta name="keywords" :content="seoInfo.keyword"/>
    </Head>
    <div class="ht-partner-top">
      <div class="banner-container">
        <BannerMedia  :url="BannerInfo.imageOrVideo"/>
      </div>
      <div class="ht-partner-top-title" v-aos="['animate__fadeInUp']">{{BannerInfo.title}}</div>
      <div class="ht-partner-top-txt" v-aos="['animate__fadeInUp']" data-aos-delay="0.5s" data-aos-duration="1s">
        {{BannerInfo.intro}}
      </div>
    </div>
    <div class="ht-partner-part-1">
      <div class="ht-partner-part-1-chart" v-aos="['animate__fadeInLeft']">
        <div>中国数据安全行业细分市场情况</div>
        <img :src="partnerData.image?partnerData.image:S1" alt=""/>
      </div>
      <div class="ht-partner-part-1-paragraph">
        <div class="paragraph-1" v-aos="['animate__fadeInUp']" v-if="partnerData.title">{{ partnerData.title }}</div>
        <div class="paragraph-2" v-aos="['animate__fadeInUp']" v-if="partnerData.intro"
             data-aos-delay="0.5s" data-aos-duration="1s" v-html="partnerData.intro"></div>
      </div>
      <div class="float-squre"></div>
      <div class="float-squre-1">
        <img src="~/assets/images/partner/3.png" alt=""/>
      </div>
    </div>
    <!-- 渠道伙伴政策 -->
    <div class="ht-partner-policy">
      <div class="ht-partner-policy-title" v-aos="['animate__fadeInUp']">
        {{ policyData['title'] || '渠道伙伴政策' }}
      </div>
      <div class="ht-partner-policy-txt" v-aos="['animate__fadeInUp']">
        {{ policyData['intro'] || '华途渠道化(新)战略 2.0，新的企业文化，新的使命愿景，新的核心价值观' }}
      </div>
      <div class="ht-partner-policy-part" v-aos="['animate__fadeInUp']" v-if="isLoadPolicy">
        <div class="ht-partner-policy-part-1" v-for="item in policyData['partnershipPolicyVos']">
          <img class="main-img" src="~/assets/images/partner/policy/a-1.png" alt=""
               v-if="!item.image"/>
          <img class="main-img" :src="item.image" alt=""
               v-if="item.image"/>
          <img class="v-line" src="~/assets/images/partner/policy/v-line.png" alt=""/>
          <div class="friend">
            <div class="friend-title">{{ item.title }}</div>
            <div class="friend-desc">{{ item.intro }}</div>
          </div>
        </div>
        <!--        <div class="ht-partner-policy-part-1">-->
        <!--          <img class="main-img" src="~/assets/images/partner/policy/a-2.png" alt=""-->
        <!--               v-if="!policyData['partnershipPolicyVos'][1].image"/>-->
        <!--          <img class="main-img" :src="policyData['partnershipPolicyVos'][1].image" alt=""-->
        <!--               v-if="policyData['partnershipPolicyVos'][1].image"/>-->
        <!--          <img class="v-line" src="~/assets/images/partner/policy/v-line.png" alt=""/>-->
        <!--          <div class="friend">-->
        <!--            <div class="friend-title">{{ policyData['partnershipPolicyVos'][1].title }}</div>-->
        <!--            <div class="friend-desc">{{ policyData['partnershipPolicyVos'][1].intro }}</div>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <div class="ht-partner-policy-system" v-aos="['animate__fadeInUp']" data-aos-duration="1s">
        <img v-if="!policyData['image']" src="~/assets/images/partner/policy/a-op.png" alt="">
        <img v-if="policyData['image']" :src="policyData['image']" alt="">
      </div>
      <NuxtLink to="http://web.huatusoft.com:8009/ChannelManage/Login.aspx" target="_blank" class="ht-partner-policy-third-btn">
        <span>登陆代理商平台</span>
        <img src="~/assets/icons/more_right_white.png" alt=""/>
      </NuxtLink>
    </div>
    <!-- 签约渠道权益 -->
    <div class="ht-partner-equity">
      <div class="ht-partner-equity-title">签约渠道权益</div>
      <div class="ht-partner-equity-cards">
        <div class="ht-partner-equity-cards-item" v-for="(item , index) in equityData" :key="index">
          <div class="base-show">
            <img src="~/assets/images/partner/equity/a-1.png" v-if="index===0"/>
            <img src="~/assets/images/partner/equity/a-2.png" v-if="index===1"/>
            <img src="~/assets/images/partner/equity/a-3.png" v-if="index===2"/>
            <img src="~/assets/images/partner/equity/a-4.png" v-if="index===3"/>
            <img src="~/assets/images/partner/equity/a-5.png" v-if="index===4"/>
            <div>{{ item.title }}</div>
            <div class="super-nums">0{{ index + 1 }}</div>
          </div>
          <div class="hover-show">
            <img src="~/assets/images/partner/equity/a-3-active.png"/>
            <div class="main-title">价格支持</div>
            <div class="main-desc" v-html="item.intro"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 加盟 -->
    <div class="ht-partner-join">
      <div class="ht-partner-join-title">渠道加盟</div>
      <div class="ht-partner-join-condition">
        <div class="join-condition-title">{{ joinData.title }}</div>
        <div class="join-condition-box" v-html="joinData.intro"></div>
        <img :src="joinData.image"/>
      </div>
      <div class="ht-partner-join-title-2" v-aos="['animate__fadeInUp']" data-aos-delay="0.1s" data-aos-duration="1s">
        加盟流程
      </div>
      <div class="ht-partner-join-flow-path">
        <div class="ht-partner-join-flow-path-top">
          <div class="flow-path-top-item" v-aos="['animate__fadeInUp']" data-aos-delay="0.31s" data-a os-duration="1s">
            <img class="large" src="~/assets/images/partner/join/step-1.png" alt=""/>
            <img class="tiny" src="~/assets/images/partner/join/to-right.png" alt=""/>
          </div>
          <div class="flow-path-top-item" v-aos="['animate__fadeInUp']" data-aos-delay="0.61s" data-aos-duration="1s">
            <img class="large" src="~/assets/images/partner/join/step-2.png" alt=""/>
            <img class="tiny" src="~/assets/images/partner/join/to-right.png" alt=""/>
          </div>
          <div class="flow-path-top-item" v-aos="['animate__fadeInUp']" data-aos-delay="0.81s" data-aos-duration="1s">
            <img class="large" src="~/assets/images/partner/join/step-3.png" alt=""/>
            <img class="tiny" src="~/assets/images/partner/join/to-right.png" alt=""/>
          </div>
          <div class="flow-path-top-item" v-aos="['animate__fadeInUp']" data-aos-delay="0.91s" data-aos-duration="1s">
            <img class="large" src="~/assets/images/partner/join/step-4.png" alt=""/>
            <img class="tiny" src="~/assets/images/partner/join/to-right.png" alt=""/>
          </div>
          <div class="flow-path-top-item" v-aos="['animate__fadeInUp']" data-aos-delay="1.19s" data-aos-duration="1s">
            <img class="large" src="~/assets/images/partner/join/step-5.png" alt=""/>
          </div>
        </div>
        <div class="ht-partner-join-flow-path-top-txt" v-aos="['animate__fadeInUp']" data-aos-delay="0.3s">
          <div class="flow-path-top-item">提交申请</div>
          <div class="flow-path-top-item">资格初审</div>
          <div class="flow-path-top-item">合作洽谈</div>
          <div class="flow-path-top-item">培训认证</div>
          <div class="flow-path-top-item">签约授权</div>
        </div>
        <div class="ht-partner-join-flow-path-bottom">
          <div class="particle-box">
            <particle/>
          </div>
          <div class="company-tel">
            <img src="~/assets/images/partner/join/concat-icon.png"/>
            <div>
              联系方式：
              <span>400-675-9090</span>
            </div>
          </div>
          <div class="ht-partner-path-submit" @click="readyToSubmit">
            <span>提交申请</span>
            <img src="~/assets/icons/more_right_white.png"/>
          </div>
        </div>
      </div>
    </div>
    <!-- 战略合作伙伴 -->
    <div class="ht-partner-strategy">
      <div class="ht-partner-strategy-title">战略合作伙伴</div>
      <div class="ht-partner-strategy-large">
        <Swiper
            v-if="strategyData.top.length>3"
            :slides-per-view="3"
            :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"
            :loop="true"
            :autoplay="{
          delay: 5000,
          disableOnInteraction: true,
        }"
        >
          <SwiperSlide v-for="item in strategyData.top" :key="item.id">
            <div class="ht-partner-strategy-large-item">
              <div class="strategy-partners">
                <div class="partners-logo">
                  <img class="third-logo.png" :src="item['logo']"/>
                </div>
                <div class="strategy-partners-infos">
                  <div class="strategy-partners-impression">{{ item['title'] }}</div>
                  <div class="strategy-partners-name">{{ item['companyName'] }}</div>
                </div>
              </div>
              <div class="strategy-partners-desc">
                {{ item['intro'] }}
              </div>
            </div>
          </SwiperSlide>
        </Swiper>
        <template v-else>
          <div class="ht-partner-strategy-large-item" v-for="item in strategyData.top" :key="item.id">
            <div class="strategy-partners">
              <div class="partners-logo">
                <img class="third-logo.png" :src="item['logo']" alt=""/>
              </div>
              <div class="strategy-partners-infos">
                <div class="strategy-partners-impression">{{ item['title'] }}</div>
                <div class="strategy-partners-name" :title="item['companyName']">{{ item['companyName'] }}</div>
              </div>
            </div>
            <div class="strategy-partners-desc">
              {{ item['intro'] }}
            </div>
          </div>
        </template>
      </div>
      <div class="ht-partner-strategy-tiny">
        <Swiper
            v-if="strategyData.list.length>6"
            :slides-per-view="6"
            :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"
            :loop="true"
            :autoplay="{
          delay: 6300,
          disableOnInteraction: true,
        }"
        >
          <SwiperSlide v-for="item in strategyData.list" :key="item.id">
            <div class="ht-partner-strategy-tiny-item">
              <img :src="item['logo']" alt="logo"/>
            </div>
          </SwiperSlide>
        </Swiper>
        <template v-else>
          <div class="ht-partner-strategy-tiny-item" v-for="item in strategyData.list" :key="item.id">
            <img :src="item['logo']" alt="logo"/>
          </div>
        </template>
      </div>
    </div>
    <!-- 邮件填写 -->
    <div class="ht-partner-send-email">
      <div class="ht-partner-email-title">一封邮件，就是合作的开始</div>
      <div class="ht-partner-email-subtitle">
        无论您有任何疑问或合作咨询，我们都欢迎您给我们留言，我们将在第一时间给您回信及解答
      </div>
      <div class="ht-partner-send-email-form">
        <div class="ht-partner-send-email-line">
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">姓名</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的姓名" v-model="subForm.name" maxlength="30"/>
            </div>
          </div>
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">电话</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的联系方式" v-model="subForm.phone" maxlength="20"/>
            </div>
          </div>
        </div>
        <div class="ht-partner-send-email-line">
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">邮箱</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的邮箱" v-model="subForm.email" maxlength="50"/>
            </div>
          </div>
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">公司</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的公司名称" v-model="subForm.company" maxlength="100"/>
            </div>
          </div>
        </div>
        <div class="ht-partner-send-email-line">
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">省份地市</div>
            <div class="ht-partner-send-email-input">
              <client-only>
                <el-cascader ref="cascadery" :props="{label:'name',value:'id'}" v-model="address"
                             placeholder="请选择您的省份地市"
                             :options="options" @change="addressChangeHandle"
                />
              </client-only>
            </div>
          </div>
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">主营业务范围</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的主营业务范围" v-model="subForm.businessScope" maxlength="50"/>
            </div>
          </div>
        </div>
        <div class="ht-partner-send-email-line">
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">主要服务的客户群体</div>
            <div class="ht-partner-send-email-input">
              <input type="text" placeholder="请输入您的主要服务的客户群体" v-model="subForm.clientGroup"
                     maxlength="50"/>
            </div>
          </div>
          <div class="ht-partner-send-email-item">
            <div class="ht-partner-send-email-label">期望签约级别</div>
            <div class="ht-partner-send-email-checkbox">
              <div class="email-checkbox-item" v-for="item in contractLevelList" :key="item['dictValue']"
                   @click="contractLevelClickHandle(item)"
              >
                <div class="checkbox-box" :class="item['dictValue']===subForm.contractLevel?'active':''">
                  <img src="~/assets/icons/checked.png" alt=""/>
                  <div class="box"></div>
                </div>
                <div class="checkbox-label">{{ item['dictLabel'] }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="ht-partner-path-submit form-submit" @click="subPartner">
          <span>提交申请</span>
          <img src="~/assets/icons/more_right_white.png"/>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.ht-partner {
  .ht-partner-top {
    width: 24rem;
    height: 8.75rem;
    //background: url(~/assets/images/partner/partner_top_bg.jpg);
    //background-size: cover;
    //background-repeat: no-repeat;
    //background-position: center bottom;
    text-align: center;
    padding-top: 0.1px;
    color: #fff;
    position: relative;

    .banner-container {
      z-index: -1;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }

    &-title {
      font-size: 0.7rem;
      font-weight: bold;
      margin-top: 3.96rem;
    }

    &-txt {
      margin-top: 0.09rem;
      font-size: 0.33rem;
      font-weight: 400;
      letter-spacing: 1px;
    }
  }

  .ht-partner-part-1 {
    background: url(~/assets/images/home/bg_product.png);
    background-size: 24rem 12.46rem;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 0.1px;
    padding-bottom: 2.49rem;
    background-position: 0 -3rem;

    &-chart {
      position: relative;
      width: 10.65rem;
      height: 7.19rem;
      margin-left: 0.81rem;
      margin-top: 1.7rem;
      background: #fff url(~/assets/images/partner/partner_chart-bg.png);
      background-size: 10.65rem 7.19rem;
      background-repeat: no-repeat;
      background-position: center 0.0003rem;
      text-align: center;
      padding-top: 0.7rem;
      z-index: 2;

      > div {
        font-size: 0.3rem;
        font-weight: bold;
        margin-bottom: 0.4rem;
      }

      img {
        width: 9.225rem;
      }
    }

    &-paragraph {
      width: 15.93rem;
      height: 6.54rem;
      background: #f9fcff;
      box-shadow: 0rem 0.04rem 0.56rem 0.01rem rgba(46, 106, 255, 0.1);
      position: absolute;
      right: 0;
      top: 3.4rem;
      z-index: 1;
      padding-left: 4.47rem;

      & > div {
        width: 10.64rem;
      }

      .paragraph {
        color: #111111;

        &-1 {
          font-size: 0.53rem;
          font-weight: bold;
          margin-top: 0.84rem;
        }

        &-2 {
          font-size: 0.25rem;
          font-weight: 500;
          margin-top: 0.21rem;
          height: 3.6rem;
          overflow-y: scroll;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        &-3 {
          font-size: 0.2rem;
          font-weight: 400;
          margin-top: 0.61rem;
        }

        &-4,
        &-5 {
          font-size: 0.2rem;
          font-weight: 400;
          margin-top: 0.33rem;
        }
      }
    }

    .float-squre {
      width: 2.14rem;
      height: 2.98rem;
      background: url(~/assets/images/partner/float-squre.png);
      background-size: cover;
      position: absolute;
      // left: 7.66rem;
      right: 14.2rem;
      top: 7.4rem;
    }

    .float-squre-1 {
      position: absolute;
      right: 0.81rem;
      top: 3.96rem;
      z-index: 3;

      img {
        width: 1.27rem;
        height: 1.27rem;
      }
    }
  }

  // 渠道伙伴政策
  .ht-partner-policy {
    background: url(~/assets/images/home/bg_client.png);
    background-repeat: no-repeat;
    background-size: 24rem 15.6rem;

    &-title {
      text-align: center;
      font-size: 0.57rem;
      font-weight: bold;
      margin-top: 1.14rem;
    }

    &-txt {
      text-align: center;
      margin-top: 0.18rem;
      font-size: 0.33rem;
      font-weight: 400;
      color: #333333;
    }

    &-part {
      display: flex;
      margin-left: 4.96rem;
      margin-top: 0.83rem;

      & > div {
        width: 6.57rem;
        height: 1.95rem;
        margin-right: 0.91rem;
        background: url(~/assets/images/partner/policy/a-0-bg.png);
        background-size: 6.57rem 1.95rem;
        background-repeat: no-repeat;
      }

      &-1 {
        display: flex;
        align-items: center;

        img {
          user-select: none;
          width: 1.112rem;
          max-height: 0.7625rem;
          margin-left: 0.63rem;
          object-fit: scale-down;
        }

        .main-img {
          width: 1.15rem;
          height: 1.05rem;
          margin-left: 0.63rem;
        }

        .v-line {
          width: 0.0125rem;
          height: 0.575rem;
          margin-left: 0.25rem;
          margin-right: 0.34rem;
        }

        .friend {
          color: #111111;

          &-title {
            font-size: 0.25rem;
            font-weight: bold;
            margin-bottom: 0.14rem;
          }

          &-desc {
            width: 3.95rem;
            font-size: 0.18rem;
            font-weight: 400;
          }
        }
      }

      //&-2 {
      //  .main-img {
      //    width: 1.112rem;
      //    max-height: 0.7625rem;
      //    margin-left: 0.63rem;
      //    object-fit: scale-down;
      //  }
      //}
    }

    // 体系
    &-system {
      width: 19.8rem;
      height: 9.25rem;
      border-radius: 0.13rem;
      //background: #fff url(~/assets/images/partner/policy/z-0-bg.png);
      //background-size: 19.8rem 9.25rem;
      //background-repeat: no-repeat;
      margin-top: 0.39rem;
      padding-top: 0.1px;

      img {
        margin-left: 2.1rem;
        width: 19.8rem;
        height: 9.25rem;
        border-radius: 0.13rem;
      }

      .policy-system {
        width: 16.49rem;
        height: 0.99rem;
        background: linear-gradient(139deg, #2e6aff 0%, #47ffda 100%);
        box-shadow: 0rem 0rem 0.43rem 0.01rem rgba(125, 159, 252, 0.26);
        border-radius: 0.06rem;
        margin: 0.76rem auto 0 auto;
        text-align: center;
        letter-spacing: 3px;
        line-height: 0.99rem;
        color: #fff;
      }

      .policy-mount-image {
        width: 15.337rem;
        height: 1.175rem;
        margin-left: 2.24rem;
      }

      &-levels {
        display: flex;
        margin: 0.3rem 0 0.39rem 0;

        &-item {
          width: 2.58rem;
          height: 2.15rem;
          background: #ffffff;
          box-shadow: 0rem 0rem 0.19rem 0.01rem rgba(125, 159, 252, 0.26);
          border-radius: 0.06rem;
          border: 0.01rem solid #c5d7ff;
          margin-left: 1.25rem;
          text-align: center;

          &:nth-child(1) {
            margin-left: 0.95rem;
          }

          img {
            width: 0.53rem;
            height: 0.76rem;
            margin-top: 0.53rem;
          }

          &:nth-child(5) {
            img {
              width: 0.73rem;
              height: 0.73rem;
            }
          }

          div {
            margin-top: 0.16rem;
            font-size: 0.2rem;
            font-weight: 500;
            color: #111111;
          }
        }
      }

      &-to {
        &-bottoms {
          display: flex;
        }

        &-item {
          width: 0.35rem;
          height: 0.6875rem;
          margin-left: 3.48rem;

          &:nth-child(1) {
            margin-left: 2.08rem;
          }
        }
      }

      &-final {
        width: 16.49rem;
        height: 1.58rem;
        background: #ffffff;
        box-shadow: 0rem 0rem 0.43rem 0.01rem rgba(125, 159, 252, 0.26);
        border-radius: 0.06rem;
        border: 0.01rem solid #c5d7ff;
        text-align: center;
        margin: auto;
        margin-top: 0.41rem;

        .part-1 {
          font-size: 0.25rem;
          font-weight: bold;
          color: #2e6aff;
          margin-top: 0.38rem;
          margin-bottom: 0.21rem;
        }

        .part-2 {
          font-size: 0.2rem;
          font-weight: 400;
          color: #111111;
        }
      }
    }

    &-third-btn {
      display: block;
      width: 2.81rem;
      height: 0.65rem;
      background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
      border-radius: 0.31rem;
      line-height: 0.65rem;
      color: #fff;
      padding-left: 0.51rem;
      font-size: 0.2rem;
      font-weight: bold;
      margin: 0.86rem auto;

      img {
        width: 0.08rem;
        height: 0.15rem;
        margin-left: 0.3rem;
      }
    }
  }

  // 签约渠道权益
  .ht-partner-equity {
    padding: 1rem 0.81rem;

    &-title {
      text-align: center;
      height: 0.78rem;
      font-size: 0.57rem;
      font-weight: bold;
      color: #000000;
    }

    &-cards {
      margin-top: 1.49rem;
      display: flex;

      &-item {
        margin-right: 0.57rem;
        width: 4rem;
        height: 4.8rem;
        background: #ffffff;
        box-shadow: 0rem 0rem 0.66rem 0.01rem rgba(46, 106, 255, 0.09);
        position: relative;
        overflow: hidden;
        transition: all 0.5s ease;

        &:last-child {
          margin-right: 0;
        }

        .base-show {
          text-align: center;

          img {
            width: 0.725rem;
            margin-top: 0.88rem;
            margin-bottom: 0.4rem;
          }

          div {
            font-size: 0.3rem;
            font-weight: 500;
            color: #333333;
          }

          .super-nums {
            position: absolute;
            bottom: -1.1rem;
            left: 0;
            right: 0;
            margin: auto;
            width: 2.3rem;
            height: 2.66rem;
            font-size: 2rem;
            font-family: Gilroy, Gilroy;
            font-weight: bold;
            color: #f3f6fd;
          }

          &::after {
            content: '';
            width: 0.05rem;
            height: 4.8rem;
            background: linear-gradient(157deg, #2e6aff 0%, #47ffda 100%);
            position: absolute;
            left: 0;
            top: 0;
          }
        }

        &:nth-child(2),
        &:nth-child(4) {
          .base-show {
            img {
              width: 0.6rem;
              height: 0.6rem;
            }
          }
        }

        &:nth-child(3) {
          .base-show {
            img {
              width: 0.6rem;
              height: 0.55rem;
            }
          }
        }

        &:nth-child(5) {
          .base-show {
            img {
              width: 0.55rem;
            }
          }
        }

        .hover-show {
          display: none;
          width: 4rem;
          height: 4.8rem;
          background: url(~/assets/images/partner/equity/c-bg.png);
          background-size: 4rem 4.8rem;
          background-repeat: no-repeat;
          border-radius: 0.19rem;
          padding: 0.625rem 0.448rem;

          img {
            width: 0.58rem;
          }

          .main-title {
            font-size: 0.24rem;
            font-weight: 500;
            color: #fff;
            margin: 0.3rem 0;
          }

          .main-desc {
            color: #fff;
            width: 3.04rem;
            line-height: 0.32rem;
            font-size: 0.16rem;
            font-weight: 400;
            height: 2.2rem;
            overflow-y: scroll;

            &::-webkit-scrollbar {
              display: none;
            }

            ::v-deep(span) {
              color: #fff !important;
            }
          }
        }

        &:hover {
          .base-show {
            display: none;
          }

          .hover-show {
            display: block;
          }

          transform: scale(1.25);
          transition: all 0.5s ease;
        }
      }
    }
  }

  // 加盟
  .ht-partner-join {
    padding-top: 0.1px;

    &-title {
      text-align: center;
      margin-top: 1.58rem;
      margin-bottom: 0.8rem;
      font-size: 0.57rem;
      font-weight: bold;
    }

    &-title-2 {
      text-align: center;
      margin-top: 2.3rem;
      margin-bottom: 0.83rem;
      font-size: 0.57rem;
      font-weight: bold;
    }

    &-condition {
      width: 24rem;
      height: 5.73rem;
      background: url(~/assets/images/partner/join/a-bg.png);
      background-size: 24rem 5.73rem;
      background-repeat: no-repeat;
      padding-top: 0.1px;
      position: relative;

      img {
        position: absolute;
        right: 2.94rem;
        top: 0.6rem;
        width: 8.36rem;
        height: 5.64rem;
      }

      .join-condition-title {
        margin-top: 1.14rem;
        margin-left: 2.75rem;
        font-size: 0.5rem;
        font-weight: bold;
        color: #ffffff;
        line-height: 1.18rem;
      }

      .join-condition-box {
        width: 8.2rem;
        height: 3rem;
        margin-left: 3.35rem;
        overflow-y: scroll;

        &::-webkit-scrollbar {
          display: none;
        }

        ::v-deep(p) {
          font-size: 0.2rem;
          font-weight: 400;
          color: #fbfbfb;
          line-height: 0.48rem;
        }
      }
    }

    &-flow-path {
      padding-top: 0.1px;

      &-top {
        display: flex;
        justify-content: center;

        .flow-path-top-item {
          display: flex;
          align-items: center;

          .large {
            width: 2.37rem;
            height: 2.29rem;
          }

          .tiny {
            width: 0.7rem;
            height: 0.76rem;
            margin-right: 0.23rem;
          }
        }
      }

      &-top-txt {
        display: flex;
        margin-left: 4.1rem;
        margin-top: 0.2rem;

        .flow-path-top-item {
          width: 2.3rem;
          height: 2.29rem;
          font-size: 0.25rem;
          text-align: center;
          margin-right: 1.03rem;
        }
      }

      &-bottom {
        overflow: hidden;
        height: 5.5rem;
        //background: url(~/assets/images/partner/join/index_wave.png);
        background-size: 33.575rem 7.15rem;
        background-position: center -2.7rem;
        position: relative;
        z-index: 1;

        .particle-box {
          position: absolute;
          bottom: 0.9rem;
          left: 0;
          z-index: -1;
          height: 9rem;
          overflow: hidden;
        }

        .company-tel {
          display: flex;
          align-items: center;

          img {
            width: 0.9125rem;
            height: 0.8625rem;
            margin-left: 8.1rem;
          }

          div {
            font-size: 0.45rem;
            font-weight: bold;
            color: #333333;
            margin-left: 0.55rem;

            span {
              font-weight: bold;
              color: #2f70fe;
            }
          }
        }
      }
    }
  }

  // 战略伙伴
  .ht-partner-strategy {
    padding-top: 1.44rem;
    width: 24rem;
    height: 11.23rem;
    background: #f5f7fa;

    &-title {
      font-size: 0.57rem;
      font-weight: bold;
      text-align: center;
    }

    &-large {
      display: flex;
      margin-top: 0.88rem;
      padding: 0 0.81rem;

      &-item {
        width: 7.01rem;
        height: 3.64rem;
        background: #ffffff;
        border-radius: 0.19rem;
        border: 0.01rem solid #e8e8e8;
        margin-right: 0.68rem;

        &:last-child {
          margin-right: 0;
        }

        .strategy-partners {
          display: flex;
          padding: 0.53rem 0.63rem;
          padding-bottom: 0;

          .partners-logo {
            width: 2.24rem;
            height: 0.81rem;
            background: #f8f9fb;
            border-radius: 0.06rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.46rem;
            margin-bottom: 0.3rem;

            img {
              width: 1.59rem;
              max-height: 0.77rem;
              object-fit: scale-down;
            }
          }

          .strategy-partners-infos {
            height: 0.81rem;
          }

          .strategy-partners-impression {
            font-size: 0.3rem;
            font-weight: bolder;
            color: #333333;
          }

          .strategy-partners-name {
            font-size: 0.22rem;
            font-weight: 400;
            color: #666666;
            margin-top: 0.1rem;
            text-overflow: ellipsis; // 溢出用省略号显示
            overflow: hidden; // 超出的文本隐藏
            display: -webkit-box; // 作为弹性伸缩盒子模型显示
            -webkit-line-clamp: 1; // 显示的行
            -webkit-box-orient: vertical;
          }
        }

        .strategy-partners-desc {
          height: 1.6rem;
          overflow-y: scroll;
          padding: 0rem 0.53rem;
          font-size: 0.19rem;
          font-weight: 400;
          color: #999999;
          letter-spacing: 0.6px;

          &::-webkit-scrollbar {
            display: none;
          }
        }

        &:hover {
          background: linear-gradient(137deg, #2e6aff 0%, #47ffda 100%);

          .strategy-partners-impression,
          .strategy-partners-name,
          .strategy-partners-desc {
            color: #fff;
          }
        }
      }
    }

    &-tiny {
      display: flex;
      padding: 0 0.78rem;
      margin-top: 0.96rem;

      ::v-deep(.swiper) {
        margin: 0;

        .ht-partner-strategy-tiny-item {
          margin-right: 0.28rem;
        }
      }

      &-item {
        width: 3.51rem;
        height: 2.1rem;
        background: #ffffff;
        border-radius: 0.13rem;
        border: 0.01rem solid #e8e8e8;
        margin-right: 0.28rem;
        display: flex;
        align-items: center;
        justify-content: center;

        img {
          width: 1.68rem;
          object-fit: contain;
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  .ht-partner-send-email {
    // height: 15.9rem;
    background: #fff;

    .ht-partner-email-title {
      margin-top: 1.78rem;
      margin-left: 8.55rem;
      font-size: 0.57rem;
      font-weight: bold;
    }

    .ht-partner-email-subtitle {
      text-align: center;
      font-size: 0.33rem;
      font-weight: 400;
      color: #666666;
      margin-top: 0.18rem;
    }

    &-form {
      width: 18.52rem;
      height: 9.82rem;
      background: #ffffff;
      box-shadow: 0rem 0rem 0.63rem 0.01rem rgba(46, 106, 255, 0.09);
      border-radius: 0.19rem;
      margin: 0.83rem auto 2.09rem auto;
      padding: 1.11rem 1.58rem 0.9rem 1.58rem;

      .ht-partner-send-email-line {
        display: flex;
        margin-bottom: 0.51rem;

        .ht-partner-send-email-item {
          margin-right: 1.53rem;

          .ht-partner-send-email-label {
            margin-left: 0.25rem;
            font-size: 0.2rem;
            font-weight: 500;
            color: #111111;
            margin-bottom: 0.23rem;
          }

          .ht-partner-send-email-input {
            input, ::v-deep(.el-cascader) {
              outline: none;
              display: inline-block;
              font-size: 0.2rem;
              font-weight: 400;
              width: 6.93rem;
              height: 0.63rem;
              background: #ffffff;
              border-radius: 0.13rem;
              border: 0.01rem solid #e3e3e3;
              padding-left: 0.25rem;
            }

            ::v-deep(.el-cascader) {
              margin-left: 0;
              padding-left: 0;
              border-radius: 0.13rem;
              border: 0.01rem solid #e3e3e3;
              overflow: hidden;
            }

            ::v-deep(.el-input) {
              font-size: 0.2rem;
              height: 100%;
            }

            ::v-deep(.el-input__wrapper) {
              padding: 0.1rem 0.1rem;
              box-shadow: none;
              padding-left: 0.25rem;
            }

            ::v-deep(.el-input__inner) {
              height: 100%;
            }

            ::v-deep(.el-input__inner)::-webkit-input-placeholder {
              color: #c7d1eb;
            }

            input::-webkit-input-placeholder {
              color: #c7d1eb;
            }

            input::-moz-placeholder {
              color: #c7d1eb;
            }

            input:-ms-input-placeholder {
              color: #c7d1eb;
            }
          }

          // 单选框
          .ht-partner-send-email-checkbox {
            height: 0.63rem;
            display: flex;
            align-items: center;
            padding-left: 0.25rem;

            .email-checkbox-item {
              display: flex;
              margin-right: 0.88rem;
              cursor: pointer;

              .checkbox-box {
                width: 0.3rem;
                margin-right: 0.09rem;
                display: flex;
                align-items: center;

                img {
                  display: none;
                  width: 0.3rem;
                  height: 0.25rem;
                }

                .box {
                  width: 0.21rem;
                  height: 0.21rem;
                  background: #ffffff;
                  border-radius: 0.03rem;
                  border: 0.01rem solid #e2e2e2;
                }

                &.active {
                  img {
                    display: inline-block;
                  }

                  .box {
                    display: none;
                  }
                }
              }

              .checkbox-label {
                width: 0.5rem;
                font-size: 0.2rem;
              }
            }

            &:last-child {
              margin-right: 0;
            }
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

  .ht-partner-path-submit {
    width: 2.24rem;
    height: 0.65rem;
    background: linear-gradient(61deg, #47ffda 0%, #2e6aff 100%);
    border-radius: 0.33rem;
    padding-left: 0.53rem;
    line-height: 0.65rem;
    color: #fff;
    margin: auto;
    margin-top: 0.7rem;
    cursor: pointer;
    font-size: 0.2rem;

    &.form-submit {
      margin-top: 1.18rem;
      font-size: 0.2rem;
    }

    img {
      width: 0.08rem;
      height: 0.15rem;
      margin-left: 0.3rem;
    }
  }
}
</style>
